<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>追击动画</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    main {
      width: 1000px;
      height: 400px;
      background-color: #ccc;
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    #ball_1 {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: #2980b9;
      position: absolute;
      top: 50%;
      left: 0;
    }

    #ball_2 {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: #8e44ad;
      position: absolute;
      top: 50%;
      left: 50%;
    }
  </style>
</head>

<body>
  <main>
    <div id="ball_1"></div>
    <div id="ball_2"></div>
  </main>
  <script>
    // 使用定时器，不停的增加left的数值
    let main = document.querySelectorAll('main')[0]
    let ball_1 = document.querySelector('#ball_1')
    let ball_2 = document.querySelector('#ball_2')
    let left_1 = ball_1.offsetLeft
    let left_2 = ball_2.offsetLeft
    let ball_width = ball_2.offsetWidth
    console.log(ball_2.style.left);
    
    // console.log(left_2);
////////////// *******   简单的小球停止  单程（单纯的条件判断而已）👇 ********   //////////////
    //👇   完成1号球的右移
    let timeId_1 = setInterval(() => {
      console.log(ball_1.style);
      
      ball_1.style.left = ++left_1 + 'px'
      // console.log(left_2 - left_1);
      if (left_2 - left_1 === 100) {
        clearInterval(timeId_1)
        //👇   完成2号球的右移
        let timeId_2 = setInterval(() => {
          ball_2.style.left = ++left_2 + 'px'
          // console.log(left_2);
          if (main.offsetWidth - left_2 === ball_width) {
            clearInterval(timeId_2)
          }
        }, 1);
      }
    }, 1);
////////////// *******   简单的小球停止  单程（单纯的条件判断而已）👆 ********   //////////////


  </script>
</body>

</html>